import React, { Component } from 'react';
import PropTypes from 'prop-types';

import ckeditor from "ckeditor";

export default class Ckeditor extends Component{
    static defaultProps = {
        editorId: 'richTextEditor',
        readyHandler: () => {},
        changeHandler: () => {},
        blurHandler: () => {},
        focusHandler: () => {}
    };

    state = {
        eId: '',
        ckInstance: {},
        config: {
            height: "150px",
            width: "100%",
            toolbarGroups: [
                { name: 'clipboard', groups: ['clipboard'] },
                { name: 'editing', groups: ['find'] },
                { name: 'links' },
                { name: 'insert' },
                { name: 'basicstyles', groups: ['basicstyles', 'cleanup'] },
                { name: 'tools' },
                { name: 'document', groups: ['mode', 'document', 'doctools'] },
                { name: 'others' },
                '/',
                { name: 'paragraph', groups: ['list', 'indent', 'align', 'bidi'] },
                { name: 'styles' },
                { name: 'colors' }
            ],
            removeButtons: 'Underline,Subscript,Superscript,horizontalrule,specialchar',
            format_tags: 'p;h1;h2;h3;pre',
            removeDialogTabs: 'image:advanced;link:advanced',
            allowedContent: true,
            format_p : { element : 'p', attributes : { class : 'normalPara' }},
            extraPlugins:'colorbutton,panelbutton,floatpanel,panel,button,colordialog,dialog,dialogui'
        },
    };
    componentWillMount() {
        this.setState({ eId: this.props.editorId });
    };
    componentDidMount() {
        //初始化
        let { eId, config } = this.state;
        let instan = {};
        instan = ckeditor.replace(eId, config);
        this.setState({ ckInstance: instan });

        //事件派发
        let { readyHandler, changeHandler, blurHandler, focusHandler } = this.props;
        instan.on('instanceReady', () => readyHandler(instan) );
        instan.on('change', () => changeHandler(instan) );
        instan.on('blur', () => blurHandler(instan) );
        instan.on('focus', () => focusHandler(instan) );
    }

    render() {
        let { editorId } = this.props;
        return (
            <div><textarea id={editorId}></textarea></div>
        )
    }
}

Ckeditor.propTypes = {
    editorId: PropTypes.string,
    readyHandler: PropTypes.func,
    changeHandler: PropTypes.func,
    blurHandler: PropTypes.func,
    focusHandler: PropTypes.func
};